<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>盒子模型-填充</title>
    <style>
        .box1{

            width: 100px;
            height: 100px;
            background-color: red;
            padding: 10px;
            border: 1px solid #000;

            /* 除了可以设置上下的 margin 还可以设置左右的 margin*/
            /*margin-left: 10px;*/
            /*margin-right: 10px;*/

            /*margin-bottom: 10px;*/
            /*margin-bottom: 30px;*/

        }

        .box2{

            width: 100px;
            height: 100px;
            background-color: red;
            padding: 10px;
            border: 1px solid green;

            /*margin-top: 20px;*/
            /*margin-top: 20px;*/
            margin-top: 30px;

        }

        /* 注意： margin 在垂直方向会有一个margin合并的效果，margin塌陷的效果。*/
        /* 如果出现了 margin 塌陷，以大的为准*/
        /* 如果编写代码的时候，不希望出现 垂直方向上的 margin 塌陷，该如何处理？*/

    </style>
</head>
<body>

    <h1>盒子模型的基本概念</h1>

    <p>什么是盒子的填充？ 指的是盒子的内容和边之间的距离</p>

    <h2>文档流</h2>
    <p>文档流指的是网页里面元素排布的规则</p>

    <p>网页里面的（HTML标签）分为两类： </p>
    <p>1. 块级元素：独占一行，从上到下，即使设置的宽度没有占据整行，也是要霸占这一行</p>
    <p>2. 内敛元素：不会独占一行，从左到右排布，合并共处</p>
    <div class="box1">
        第一个盒子
    </div>

    <div class="box2">
        第二个盒子
    </div>

<!--ctrl+alt+l 快速的格式化代码-->
</body>
</html>